<template>
  <div class="baseCase-table" v-if='tableVisible'>
     <div class="export">
      <el-button type='success' @click.stop = 'downLoadExcel'>
        导出Excel
      </el-button>
    </div>


    <el-table
      :data="tableData"
      border
      stripe
      max-height="600"
      :key='count'
     >


     <el-table-column 
      prop='CODE_Y_TITLE' 
      label='集团标准职级'
      width='240'
      align="center"
      v-if='yAxis==2 && tableCol.length'
      :key='colCount'
     >
     </el-table-column>

      <el-table-column 
        label='组织架构'
        min-width='240'
        align="center"
        v-if='yAxis==1 && tableCol.length'
        :key='colCount'
      >
        <el-table-column
          v-for='i in tier'  
          :label='handleLabelNum(i)'
          width='130'
          :key='i'
          align="center"
        >
           <template scope="scope">{{getCengji(scope,i)}}</template>
        </el-table-column>
      </el-table-column>



      <el-table-column
        v-for='(k,i) in tableCol'
        :label="k.title"
        align="center"
        :key='colCount*(i+1)'
        >
        <el-table-column :key='colCount*(i+1)' align="center" v-for='(q,e) in k.dataList' :label="q.title">

          <el-table-column :key='colCount*(i+1)' :min-width="setWidth(w.title)" align="center" v-for='(w,c) in q.dataList' :label='w.title'>
            <template scope="scope">
              <!-- <span> -->
                {{getTd(scope.$index,w.code)}}
              <!-- </span> -->
              <!-- <div v-else class='loader10'></div> -->
            </template>
            
          </el-table-column>

        </el-table-column>
      </el-table-column>
    
    </el-table>
  </div>
</template>

<script>
import Vue from 'vue'
import { Pagination, Message } from 'element-ui'
import Bus from './bus'
import Axios from 'axios'
Vue.use(Pagination)
export default {
  data () {
    return {
      tableCol: [],
      tableData: [],
      thirdCol: [],  //给后台的第三行参数
      tableVisible: false,
      yAxis: '',
      tier: 0,
      params: {},
      count: 1,
      colCount: 2,
      sum: 10,  //一次并发多少条数据
      refreshCount:10   //每请求多少列 执行一次渲染
    }
  },
  computed: {
    // 总共循环多少次  
    sumCount () {
      return parseInt(this.thirdCol.length / this.sum)

    },
    residue () {
      return this.thirdCol.length % this.sum   //  如果是0,不需再请求, 否则再请求需要再请求residue次,
    }

  },
  watch: {

    tableCol () {
      this.count++
    },

    thirdCol: {
      handler () {

        if (this.sumCount) {
          this.getSumCountAsyncCol()
        } else if (this.residue) {
          for (let e = this.residue; e > 0; e--) {
            this.getResidueAsyncCol(e)
          }
        }

      },

      deep: true
    }


  },

  methods: {

    getResidueAsyncCol (index) {
      Axios
        .post(this.Axios.baseURI + '/empBaseInfo1/getEmpBaseInfoCount1', this.thirdCol[this.thirdCol.length - index])
        .then((res) => {
          const data = res.data.datas

          data.forEach((ele, i) => {

            this.tableData[i][ele.code_x] = ele.countNum

          })
          this.colCount++

        })
    },

    getSumCountAsyncCol () {

      let sum = 0

      const fn = () => {
        for (let inIndex = 0; inIndex < this.sum; inIndex++) {
          let thirdColIndex = sum * this.sum + inIndex

          Axios
            .post(this.Axios.baseURI + '/empBaseInfo1/getEmpBaseInfoCount1', this.thirdCol[thirdColIndex])
            .then((res) => {

              const data = res.data.datas

              data.forEach((ele, i) => {

                this.tableData[i][ele.code_x] = ele.countNum

              })

              this.getObjLength() % this.refreshCount == 0 && this.colCount++

              if (inIndex == this.sum - 1) { //最后一次循环
                this.getObjLength() % this.refreshCount !== 0 && this.colCount++
                if (++sum < this.sumCount) {
                  fn()
                } else if (this.residue) {
                  for (let e = this.residue; e > 0; e--) {
                    this.getResidueAsyncCol(e)
                  }
                }

              }

            })

        }

      }


      fn()
    },

    getObjLength () {
      if (this.tableData[0]) {
        const cut = this.yAxis == 1 ? 4 : 2
        return Object.keys(this.tableData[0]).length - cut
      }
      return 0
    },



    // getAsyncTol (index) {
    //   // condition数组（给后台的参数）

    //   Axios
    //     .post(this.Axios.baseURI + '/empBaseInfo1/getEmpBaseInfoCount1', this.thirdCol[index])
    //     .then((res) => {

    //       if (res.data.status == 1) {

    //         return new Promise((resolve) => {

    //           const data = res.data.datas

    //           data.forEach((ele, i) => {

    //             this.tableData[i][ele.code_x] = ele.countNum

    //           })

    //           this.colCount++

    //           resolve()

    //         }).then(() => {

    //           if (this.getObjLength() < this.thirdCol.length) {
    //             this.getAsyncTol(this.thirdCol.length - (this.thirdCol.length - this.getObjLength()))
    //           } else {
    //             this.colCount++
    //           }
    //         })

    //       }

    //     })

    // },


    getCengji (scope, i) {
      const index = scope.$index
      if (this.tableData[index].level == i) {
        return this.tableData[index].descrshort
      }
      return ''
    },
    handleLabelNum (num) {
      return `第${num}层`
    },
    getTd (index, code) {

      const row = this.tableData[index]

      if (row[code] != undefined) {
        return row[code]
      }
      return '正在计算...'

    },
    downLoadExcel () {

      if (!this.tableData.length) {
        Message.warning('暂无数据,请重新搜索')
        return
      }
      const p = this.params
      window.location.href = `${this.Axios.baseURI}/empBaseInfo1/exportEmpBaseInfoCount?setId=${p.setId}&flag=${p.flag}&token=${localStorage.getItem('token')}&tier=${p.tier}&deptId=${p.deptId}&countType=${p.countType}&countfieldNameType=${p.countfieldNameType}&educationTitle=${p.educationTitle}&education=${p.education}&sex=${p.sex}&jobRes=${p.jobRes}&marriage=${p.marriage}&recruitment=${p.recruitment}&jobCategories=${p.jobCategories}&age=${p.age}&workAge=${p.workAge}&groupService=${p.groupService}&companyService=${p.companyService}&beginDate=${p.beginDate}&endDate=${p.endDate}`

    },
    setWidth (str) {
      return 120
      if (str) {
        switch (str.length) {
          case 1:
            return 100
            break
          case 2:
            return 100
            break
          default:
            return (str.length) * 24
            break
        }
      }
    },

  },
  mounted () {
    Bus.$on('tableData', (data) => { this.tableData = data })
    Bus.$on('tableVisible', (data) => this.tableVisible = data)
    Bus.$on('tableCol', (data) => this.tableCol = data)
    Bus.$on('pageTotal', (data) => this.page.total = data)
    Bus.$on('params', (data) => this.params = data)
    Bus.$on('yAxis', (data) => this.yAxis = data)
    Bus.$on('tier', (data) => this.tier = data)
    Bus.$on('thirdCol', (data) => this.thirdCol = data)
  },
}
</script>

<style scoped lang='less'>
.baseCase-table {
  padding: 30px 20px;
  border-top: 10px solid #ecf0f5;
  .export {
    margin-bottom: 15px;
  }

  .loader10:before {
    content: '';
    position: absolute;
    top: 0px;
    left: -15px;
    height: 8px;
    width: 8px;
    border-radius: 8px;
    -webkit-animation: loader10g 3s ease-in-out infinite;
    animation: loader10g 3s ease-in-out infinite;
  }

  .loader10 {
    position: relative;
    width: 8px;
    height: 8px;
    top: 46%;
    left: 46%;
    border-radius: 8px;
    -webkit-animation: loader10m 3s ease-in-out infinite;
    animation: loader10m 3s ease-in-out infinite;
  }

  .loader10:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 15px;
    height: 8px;
    width: 8px;
    border-radius: 8px;
    -webkit-animation: loader10d 3s ease-in-out infinite;
    animation: loader10d 3s ease-in-out infinite;
  }

  @-webkit-keyframes loader10g {
    0% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    15% {
      background-color: rgb(71, 140, 250, 1);
    }
    50% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    75% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    100% {
      background-color: rgba(71, 140, 250, 0.6);
    }
  }
  @keyframes loader10g {
    0% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    15% {
      background-color: rgba(71, 140, 250, 1);
    }
    50% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    75% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    100% {
      background-color: rgba(71, 140, 250, 0.6);
    }
  }

  @-webkit-keyframes loader10m {
    0% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    15% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    50% {
      background-color: rgba(71, 140, 250, 1);
    }
    75% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    100% {
      background-color: rgba(71, 140, 250, 0.6);
    }
  }
  @keyframes loader10m {
    0% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    15% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    50% {
      background-color: rgba(71, 140, 250, 1);
    }
    75% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    100% {
      background-color: rgba(71, 140, 250, 0.6);
    }
  }

  @-webkit-keyframes loader10d {
    0% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    15% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    50% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    75% {
      background-color: rgba(71, 140, 250, 1);
    }
    100% {
      background-color: rgba(71, 140, 250, 0.6);
    }
  }
  @keyframes loader10d {
    0% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    15% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    50% {
      background-color: rgba(71, 140, 250, 0.6);
    }
    75% {
      background-color: rgba(71, 140, 250, 1);
    }
    100% {
      background-color: rgba(71, 140, 250, 0.6);
    }
  }
}
</style>

<style>
.baseCase-table .gutter {
  border-right: none;
}
</style>
